<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   style 写css样式-->
    <script>
        // 注释
        /*注释*/
        <!--  注意 -->
    </script>
    <style>

        /*注释：css注释   html注释  js注释  */
        /*代码格式化  自动对齐   */
        /*.odd {*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    align-items: flex-start;*/
        /*}*/
    </style>
    <!--    路径：绝对路径：相对路径-->
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/load-html.js"></script>
    <script src="../js/home.js"></script>


</head>
<body>
<!--
属性：id  class 原始属性
data-index  自定义属性
属性的命名规范：见名知意
命名class时，如果有两个类名 用空格隔开 每个类名如果有多个单词 用破折线隔开
id属性：如果有多个单词 用下划线隔开
注意：id用于js  class用于css
html 要学习的知识点：标签（元素）
div
a
img
ul
li
h3
p
span

-------------------------- 他们都是div封装的标签
-->
<!--<div class="s-top-wrap s-isindex-wrap" id="" onclick="">-->
<!--    <ul>-->
<!--        <li data-index="0"></li>-->
<!--    </ul>-->
<!--</div>-->
<!--div 默认宽度为浏览器的可视宽度  高度为0-->
<!--代码多谢注释：解释odd奇数 even偶数-->
<!--修改idea快捷键 格式化对齐：ctrl+shift+f
 复制：ctrl+c
 粘贴：ctrl+v
 剪切：ctrl+x
 删除一行：ctrl+d
 撤回（倒退）：ctrl+z
 前进：ctrl+y
 缩进：shift+tab
 -------------------------
 打开文件夹：win+e
 显示桌面：win+d
 打开cmd：win+r
 查询：win+q
 -->
<!--<div class="odd">-->
<!--    <div style="color: blue;text-decoration:underline; cursor:pointer;">div-->
<!--        <div></div>-->
<!--    </div>-->
<!--</div>-->

<!--<a href="#" style="text-decoration: none;color: black;cursor: auto">aa</a>-->
<div class="content">
    <div>
       <div id="top"></div>
        <div class="middle">
            <div>
                <div>
                    <div class="title">较新动态</div>
                    <div class="news-area">
                        <div><img src="../imgages/m331.jpg" height="190" width="268"/></div>
                        <div id="news">
<!--                            <div>-->
<!--                                <div class="font-title single-line-overflow"><a href="newsDetail.html?id=1"> 日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海</a>-->
<!--                                </div>-->
<!--                                <div class="font-area single-line-overflow">日本较大的抹茶餐饮连锁正式登陆，上海，其中-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <div class="font-title single-line-overflow">日本较大抹茶餐饮七叶和茶登陆上海-->
<!--                                </div>-->
<!--                                <div class="font-area single-line-overflow">日本较大的抹茶餐饮连锁正式登陆，上海，其中-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <div class="font-title single-line-overflow">日本较大抹茶餐饮七叶和茶登陆上海-->
<!--                                </div>-->
<!--                                <div class="font-area single-line-overflow">日本较大的抹茶餐饮连锁正式登陆，上海，其中-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
                <div>
                    <div class="title">产品展示</div>
                    <div class="product-area" id="product">
<!--                        <div>-->
<!--                            <div ><img src="../imgages/48_j53b.jpg"  onclick="window.location.href='productDetail.html?id=1'" height="300" width="300"/></div>-->
<!--                            <div class="font-title single-line-overflow" onclick="window.location.href='productDetail.html?id=1'"> 蚂蚁上树</div>-->
<!--                            <div class="font-area single-line-overflow">-->
<!--                                粉丝200g,猪内馅50克。-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <div><img src="../imgages/48_j53b.jpg" height="300" width="300"/></div>-->
<!--                            <div class="font-title single-line-overflow">蚂蚁上树</div>-->
<!--                            <div class="font-area single-line-overflow">-->
<!--                                粉丝200g,猪内馅50克。-->

<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div id="foot"></div>

<!--        <script type="text/javascript">-->
<!--            //在js中引入,css 统一用class  js统一用id ,html  就写div  css 另外引入，js 引入-->
<!--            $(document).ready(function () {-->
<!--                $('#top').load('top.html');-->
<!--                $('#foot').load('foot.html');-->
<!--            });-->
<!--        </script>-->
    </div>
</div>
</body>
</html>